import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "./pages/About";
import Cart from "./pages/Cart";
import Index from "./pages/Index";
import Login from "./pages/Login";
import Register from "./pages/Register";
import NotFound from "./pages/NotFound";
import Contact from "./pages/Contact";
import News from "./pages/News";
import NewsDetails from "./pages/NewsDetails";
import Product from "./pages/Product";
import ProductDetails from "./pages/ProductDetails";
import { createStore } from "redux";
import { Provider } from "react-redux";

// state
let initState = {
  buyCount: "",
};

// action
// {type:'ENCREASE'}
// {type:'DECREASE'}

// reducer
function appReducer(state = initState, action) {
  switch (action.type) {
    case "ENCREASE":
      return { ...state, buyCount: state.buyCount + 1 };
      break;
    case "DECREASE":
      return { ...state, buyCount: state.buyCount - 1 };
      break;
    default:
      return state;
      break;
  }
}

// store
let store = createStore(appReducer);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <Routes>
        <Route path="/about" element={<About />}></Route>
        <Route path="/cart" element={<Cart />}></Route>
        <Route path="/" element={<Index></Index>}></Route>
        <Route path="/login" element={<Login />}></Route>
        <Route path="/register" element={<Register />}></Route>
        <Route path="/contact" element={<Contact />}></Route>
        <Route path="/news" element={<News />}></Route>
        <Route path="/news_details" element={<NewsDetails />}></Route>
        <Route path="/product" element={<Product />}></Route>
        <Route path="/product_details" element={<ProductDetails />}></Route>
        <Route path="/*" element={<NotFound />}></Route>
      </Routes>
    </BrowserRouter>
  </Provider>
);
